<template>
  <div class="login-container">
    <h2>登录页面</h2>
    <el-form @submit.native.prevent="login" class="login-form">
      <el-form-item label="用户名" :label-width="'100px'">
        <el-input
            v-model="student.stuId"
            type="text"
            placeholder="请输入用户名"
            class="input-field"
        />
      </el-form-item>
      <el-form-item label="密码" :label-width="'100px'">
        <el-input
            v-model="student.stuPwd"
            type="password"
            placeholder="请输入密码"
            class="input-field"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" round native-type="submit" class="submit-btn">登录</el-button>
        <el-button type="danger" round @click="reset" class="reset-btn">重置</el-button>
      </el-form-item>
    </el-form>
    <p v-if="loginFailed" class="error-message">登录失败，请重试。</p>
    <div v-if="loginSuccess" class="success-message">
      <p>欢迎，{{ stuInf.stuName }}！</p>
      <p>年龄：{{ stuInf.age }}</p>
      <p>性别：{{ stuInf.sex ? '男' : '女' }}</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';

const router = useRouter();
const student = ref({
  stuId: '',
  stuPwd: '',
});

const stuInf = ref({
  id: '',
  stuName: '',
  sex: '',
  age: '',
  password: '',
  stuId: '',
});

const loginSuccess = ref(false);
const loginFailed = ref(false);

// 假设管理员的学号是 "admin"
const isAdmin = ref(false);

const login = async () => {
  // 判断是否是管理员
  if (student.value.stuId === 'admin') {
    isAdmin.value = true;
    // 如果是管理员，直接跳转到管理员页面
    router.push('/admin');
    return;
  }

  // 如果不是管理员，进行后端验证
  const requestBody = {
    id: student.value.stuId,
    password: student.value.stuPwd,
  };

  console.log('请求体：', requestBody);

  try {
    const response = await axios.post(
        'http://localhost:8220/yyds/api/User/login2',
        requestBody,
        { headers: { 'Content-Type': 'application/json' } }
    );

    console.log('响应体: ', response.data);
    if (response.data && response.data.stuId) {
      stuInf.value = response.data;
      loginFailed.value = false;
      loginSuccess.value = true;
      // 登录成功后跳转到 user.html
      window.location.href = '/user.html';  // 跳转到静态 HTML 文件
    } else {
      loginFailed.value = true;
      loginSuccess.value = false;
    }
  } catch (err) {
    console.error('登录失败：', err.response?.data);
    loginFailed.value = true;
    loginSuccess.value = false;
  }
};

const reset = () => {
  student.value.stuId = '';
  student.value.stuPwd = '';
};
</script>

<style scoped>
/* 背景渐变效果 */
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, #42b983, #34495e);
  font-family: 'Arial', sans-serif;
  color: white;
  overflow: hidden; /* 防止滚动条 */
}

/* 容器居中并优化对齐 */
.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.6); /* 半透明背景 */
  border-radius: 12px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  animation: fadeIn 1s ease-out;
}

/* 渐变标题 */
h2 {
  font-size: 2.2rem;
  background: linear-gradient(90deg, #42b983, #34495e);
  -webkit-background-clip: text;
  color: transparent;
  text-align: center;
  margin-bottom: 30px;
  animation: slideIn 1s ease-out;
}

/* 表单的样式 */
.login-form {
  width: 350px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  animation: fadeInUp 1s ease-out;
}

/* 输入框样式 */
.input-field {
  width: 100%;
  margin-bottom: 20px;
  padding: 12px;
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
}
.input-field:focus {
  border-color: #42b983;
  box-shadow: 0 0 10px rgba(66, 184, 131, 0.5);
}

/* 按钮样式 */
.el-button {
  width: 120px;
  margin: 10px;
  padding: 12px;
  border-radius: 4px;
  font-weight: bold;
  transition: all 0.3s ease;
}

/* 登录按钮样式 */
.submit-btn {
  background-color: #42b983;
  color: white;
  border: none;
}
.submit-btn:hover {
  background-color: #34b183;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 重置按钮 */
.reset-btn {
  background-color: #95a5a6;
  color: white;
  border: none;
}
.reset-btn:hover {
  background-color: #7f8c8d;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* 消息样式 */
.error-message {
  color: #e74c3c;
  font-size: 1rem;
  margin-top: 20px;
  animation: fadeInMessage 1s ease-out;
}

.success-message {
  color: #2ecc71;
  font-size: 1rem;
  margin-top: 20px;
  animation: fadeInMessage 1s ease-out;
}

/* 动画效果 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInMessage {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .login-form {
    width: 80%;
  }
}
</style>

